<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* v-cloak 在html属于标签内的自定义属性 */
        [v-cloak]{
            display: none;
        }
    </style>
</head>

<body>
    <!-- 视图层 -->
    <div id="app" v-cloak>
        <div>随机分数:{{grade}}</div>
        <!-- 单分支: 成绩为正整数才做判断 -->
        <!-- 
        <div v-if="grade>=0">
            <p>您的成绩是:{{grade}}</p>
            <p>是否及格:
                <span v-if="grade>=60">及格</span>
                <span v-else>不及格</span>
            </p>
            <p>
                成绩等级:
                <span v-if="grade>=90">A</span>
                <span v-else-if="grade>=80">B</span>
                <span v-else-if="grade>=70">C</span>
                <span v-else-if="grade>=60">D</span>
                <span v-else>E</span>
            </p>
        </div> -->

        
        <div v-show="grade>=0">
            <p>您的成绩是:{{grade}}</p>
            <p>是否及格:
                <span v-show="grade >= 60">及格</span>
                <span v-show="grade < 60">不及格</span>
            </p>
            <p>
                成绩等级: 
                <span v-show="grade>=90">A</span>
                <span v-show="grade>=80&&grade<90">B</span>
                <span v-show="grade>=70&&grade<80">C</span>
                <span v-show="grade>=60&&grade<70">D</span>
                <span v-show="grade < 60">E</span>
            </p>
        </div>
      
    </div>
</body>
<script>

    // v-cloak 等页面编译完毕再展示视图  (配合css使用)

    // v-if  条件渲染  => 根据指令的值决定元素是否渲染  true => 渲染  false=> 不渲染
    // v-if v-else-if v-else  => 单分支 双分支 多分支

    // v-show 条件展示 => 不管条件成立与否,元素都会渲染, 如果表达式结果为true,元素就会显示(display:block),false=>元素就会隐藏(display:none)


    // 对比v-if和v-show
    // 1. 功能上 
    // a.  v-if条件渲染,根据指令的值决定元素是否渲染,满足条件就渲染,不满足就不渲染
    //     v-show条件展示,不管条件成立与否,元素都会渲染,只不过通过css决定元素是否显示

    // 2. 性能方面
    // a. v-if初始渲染成本比较低,但是切换成本比较高
    // b. v-show初始渲染成本比较高, 切换成本比较低


    // 分数: -100 - 100   // 负数不渲染

    // 页面加载时进行初始化渲染
    var app = new Vue({  // 创建Vue实例
        el:"#app",   // 挂载的元素
        data:{ // 数据层 => 对应属性名将属性值 拼接到模版语法中
            str:"hello Vue",
            num:100,
            bool:true,
            grade: -100 + Math.round(Math.random()*200),
        }
    })

 






</script>

</html>